在網路上看到有人推薦 Formik
不僅符合 react native 也可以在 react 上使用
文件簡單易懂而且一直保有更新
就因如此，今天我們來學習如何使用吧！

安裝

npm i formik

Formikx 提供

Formik、Form、Field 及 ErrorMessage 組件。

1. Formik 也提供 useFormik hook 的寫法使用

2. Formil / useFormik 的 props

• initialValues 給予初始值
• enableReinitialize 允許重複初始來滿足初始值重載需求，也就是運用 state 來改變值，ㄉ
• validate/validationSchema 驗證條件
• onSubmit 送出事件

3. 驗證條件分兩種

• validate 自己寫驗證條件
• validationSchema 檢核邏輯，運用堆疊的方式，建議搭配 Yup

4. 必須給予 name 作為欄位識別，來對應 vlaue，因為 values, ErrorMessage, touched 物件，裡面的 key 都會和 input 的 name 對應。

5. setFieldValue func 來調整欄位數值
   可以用 onclick 事件寫入 setFieldValue 來改變欄位的值
   ex. setFieldValue('name',value)

簡單 code 呈現如下：

const Form = () => {
  return(
    <View>
      <Formik
        initialValues={
            // initialValues
        }
        onSubmit={(values) => {
          // values to submit
        }}
        validationSchema={
          {
            // validation rules here
          }
        }
        enableReinitialize
      >
        {(props) => <FormComponent />} // form UI
      </Formik>
    </View>
  )
};

export default Form;

useFormik Hook 的方式

import { useFormik } from 'formik';
const Form = () => (
  <View>
    <Formik
      initialValues={
          // initialValues
      }
      onSubmit={(values) => {
        // values to submit
      }}
      validationSchema={
        {
          // validation rules here
        }
      }
      enableReinitialize
    >
      {(props) =>
        // form UI
        <View style={styles.formBox}>
          <TextInput
            name="title"
            style={styles.input}
            placeholder="Review title"
            onChangeText={props.handleChange("title")}
            value={props.values.title}
            // 加上著個只要碰過就會檢查 validationSchema
            onBlur={props.handleBlur("title")}
          />
          <Text style={styles.errorText}>
            // 按了btn才會檢查 validationSchema
            {props.touched.title && props.errors.title}
          </Text>
          <Button
            title="submit"
            color="maroon"
            onPress={props.handleSubmit}
          />
        </View>}
    </Formik>
  </View>
);

export default Form;

debug

可由官網下載debug放入 Form 標籤裡面

import { Debug } from './Debug';

const Form = () => (
  <View>
    <Formik
      initialValues={
          /*initialValues*/
      }
      onSubmit={(values) => {
        /* values to submit ... */
      }}
      validationSchema={
        {
          /* validation rules here */
        }
      }
      enableReinitializ
    >
      {(props) =>
        <View style={styles.formBox}>
          <TextInput
            name="title"
            style={styles.input}
            placeholder="Review title"
            onChangeText={props.handleChange("title")}
            value={props.values.title}
            // 加上著個只要碰過就會檢查 validationSchema
            onBlur={props.handleBlur("title")}
          />
          <Text style={styles.errorText}>
            // 按了btn才會檢查 validationSchema
            {props.touched.title && props.errors.title}
          </Text>
          <Button
            title="submit"
            color="maroon"
            onPress={props.handleSubmit}
          />
          // put DEBUG COMPONENT here
          <Debug />
        </View>}
    </Formik>
  </View>
);

export default Form;

yup 介紹

Yup 是一個用於解析和驗證 JS 的生成器，使用 object 的驗證套件，API 受 Joi 的啟發很大，但更為精簡，可以用堆疊的方式加入條件，基本上 Formik 完全為了 Yup 量身打造一個可以直接設置 Yup 驗證規則的屬性，也就是 validationSchema

安裝

npm i yup
cd ios
pod install

基本介紹

• 引入

import * as yup from 'yup'

• yupObject().shape 定義驗證規則，條件堆疊再一起

const schema = yupObject().shape({
  // 名字 字串 必填
  name: yup.string().required(),
  // 年紀 數字 最小為18 必填
  age: yup.number().min(18).required(),
  // 密碼 字串 必填
  pcode: yup.string().required(),
  // 密碼確認 密碼輸入後才檢核 必填 需與密碼欄位輸入的資訊相同 (相依輸入值)
  pcodeConfirm: yup.string().when('pcode', (pcode, schema) => {
  return pcode ? schema.oneOf([pcode], '密碼需相同').required() : schema
  })
});

• schema.validate：檢驗 value 是否符合 schema
• schema.cast：根據 schema 把 value 作轉換後輸出
• schema.default：用來將 schema 中的欄位設定預設值
• schema.when：根據 schema 中的其他欄位來改變驗證的規則
• schema.test：用來建立自訂的驗證邏輯
• setLocal：用來覆蓋預設驗證值

Day 23 大致上先來介紹一下 Formik 跟 yup 下集來教搭配一起使用